<template>
  <div>
    <div id="chainMap"></div>
  </div>
</template>

<script>
import busData from "./../assets/busData.json";
// 主模块
let echarts = require("echarts/lib/echarts");
// 散点图
require("echarts/lib/chart/scatter");
// 散点图放大
require("echarts/lib/chart/effectScatter");
// 地图
require("echarts/lib/chart/map");
// 图例
require("echarts/lib/component/legend");
// 提示框
require("echarts/lib/component/tooltip");
// 地图geo
require("echarts/lib/component/geo");
// 中国地图
require("echarts/map/js/china");

export default {
  name: "ChainMap",
  data() {
    return {
      randomData: 0
    };
  },
  mounted() {
      this.chainMap();
  },
  methods: {
    chainMap: function() {
      const chainMap = this.$echarts.init(document.getElementById("chainMap"));
      this.randomData = Math.round(Math.random() * 500);
      chainMap.setOption({
        tooltip: {},
        legend: {
          orient: "vertical",
          left: "left",
          data: [""]
        },
        visualMap: {
          min: 0,
          max: 1500,
          left: "10%",
          top: "bottom",
          text: ["高", "低"],
          calculable: true,
          color: ["#0b50b9", "#c3e2f4"]
        },
        selectedMode: "single",
        series: [
          {
            name: "",
            type: "map",
            mapType: "china",
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"
              },
              emphasis: {
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            showLegendSymbol: true,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: [
              { name: "北京", value: this.randomData },
              { name: "天津", value: this.randomData },
              { name: "上海", value: this.randomData },
              { name: "重庆", value: this.randomData },
              { name: "河北", value: this.randomData },
              { name: "河南", value: this.randomData },
              { name: "云南", value: this.randomData },
              { name: "辽宁", value: this.randomData },
              { name: "黑龙江", value: this.randomData },
              { name: "湖南", value: this.randomData },
              { name: "安徽", value: this.randomData },
              { name: "山东", value: this.randomData },
              { name: "新疆", value: this.randomData },
              { name: "江苏", value: this.randomData },
              { name: "浙江", value: this.randomData },
              { name: "江西", value: this.randomData },
              { name: "湖北", value: this.randomData },
              { name: "广西", value: this.randomData },
              { name: "甘肃", value: this.randomData },
              { name: "山西", value: this.randomData },
              { name: "内蒙古", value: this.randomData },
              { name: "陕西", value: this.randomData },
              { name: "吉林", value: this.randomData },
              { name: "福建", value: this.randomData },
              { name: "贵州", value: this.randomData },
              { name: "广东", value: this.randomData },
              { name: "青海", value: this.randomData },
              { name: "西藏", value: this.randomData },
              { name: "四川", value: this.randomData },
              { name: "宁夏", value: this.randomData },
              { name: "海南", value: this.randomData },
              { name: "台湾", value: this.randomData },
              { name: "香港", value: this.randomData },
              { name: "澳门", value: this.randomData }
            ]
          }
        ]
      });
    },
    busLinesFun: function(data) {
      const hStep = 300 / (data.length - 1);
    }
  }
};
</script>

<style scoped>
#chainMap {
  height: 90vh;
}
</style>